<template>
  <div class="catering-view">
    <div class="top-view">
      <div class="top-left">
        <box-view name="食品销售额排行榜（TOP10）">
          <top-view :list="setLeft1Data(catering.left1Data)"></top-view>
        </box-view>
      </div>
      <div class="top-middle">
        <middle-view :dataVal="catering.topData"></middle-view>
      </div>
      <div class="top-right">
        <box-view name="餐厅销售额排行榜（TOP10）">
          <top-view :list="setRight1Data(catering.right1Data)"></top-view>
        </box-view>
      </div>
    </div>
    <div class="bottom-view">
      <div class="bottom-left">
        <box-view name="销售趋势">
          <echarts-view :option="setEcharts(catering.dataAll)"></echarts-view>
        </box-view>
      </div>
      <div class="bottom-right">
        <box-view name="销售额统计">
          <table-view :titleList="titleList" :list="catering.dataAll" />
        </box-view>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import EchartsView from "../components/echarts/index.vue";
import TableView from "@/components/TableView/index.vue";
import * as echarts from "echarts";
import BoxView from "@/components/BoxView/index.vue";
import TopView from "../components/top/index.vue";
import MiddleView from "@/components/MiddleView/index.vue";
export default {
  name: "CareringView",
  mixins: [],
  components: {
    EchartsView,
    TableView,
    BoxView,
    TopView,
    MiddleView,
  },
  props: {
    catering: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      optionLeft: {
        color: ["#177BEE", "#6CD06A"],
        tooltip: {
          trigger: "none",
          // axisPointer: {
          //   type: "shadow",
          // },
          axisPointer: {
                  type: "shadow", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
                  snap: true, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
                },
                showContent: true, // 是否显示提示框浮层，默认显示
                alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
                triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
                confine: true, // 是否将 tooltip 框限制在图表的区域内
                backgroundColor: "rgba(0,0,0,0.5)", // 提示框浮层的背景颜色
                padding: 15, // 提示框浮层内边距，单位px
                // position: "left",
                textStyle: {
                  color: "#fff", // 文字的颜色
                },
          formatter: "{a0}: {c0}<br />{a1}: {c1}",
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },

        xAxis: {
          type: "category",
          data: [],
          boundaryGap: false,
          lineStyle: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
          },
          axisLabel: {
            color: "#fff",
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          icon: "roundRect",
          // // right: "10%",
          // itemWidth: 12, // 设置宽度
          // itemHeight: 12, // 设置高度
          // itemGap: 15,
        },
        yAxis: {
          name:'元',
          type: "value",
          lineStyle: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
          },
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "当前销售额",
            data: [],
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.9,
                  color: "rgba(23,123,238,0.1)"
                },
                {
                  offset: 0,
                  color: "rgba(23,123,238,1)"
                },
              ]),
            },
            lineStyle: {
              color: "#177BEE",
              width: 2,
            },
          },
          {
            name: "同期销售额",
            data: [],
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.9,
                  color: "rgba(108,208,106,0.1)",
                },
                {
                  offset: 0,
                  color:"#6CD06A"
                },
              ]),
            },
            lineStyle: {
              color: "#6CD06A",
              width: 2,
            },
          },
        ],
      },
      // 排行数据
      list: [],
      // 表头数据
      titleList: [
        {
          class: "table-title-long text-size",
          title: "时间",
          value: "day",
        },
        {
          class: "table-title-long text-size",
          title: "销售额（元）",
          value: "nowMoney",
        },
        {
          class: "table-title-long text-size",
          title: "同期销售额（元）",
          value: "lastMoney",
        },
        {
          class: "table-title-long text-size",
          title: "销售量",
          value: "nowNum",
        },
        {
          class: "table-title-long text-size",
          title: "同期销售量",
          value: "lastNum",
        },
      ],
      // 表格数据
      dataList: [],
      btnType: 0,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // init() {
    //   this.getOptionLeft();
    // },
    // 餐厅销售额排行榜（TOP10）
    setRight1Data(data) {
      let dataList = [];
      for (let i = 0; i < data.length; i++) {
        dataList.push({
          no: i + 1,
          title: data[i].storeName,
          line: data[i].moneyRate + "%",
          num: data[i].money + "元",
        });
      }
      return dataList;
    },
    // 食品销售额排行榜（TOP10）
    setLeft1Data(data) {
      let dataList = [];
      for (let i = 0; i < data.length; i++) {
        dataList.push({
          no: i + 1,
          title: data[i].commodity,
          line: data[i].moneyRate + "%",
          num: data[i].money + "元",
        });
      }
      return dataList;
    },
    setEcharts(data) {
      if (data) {
        this.optionLeft.xAxis.data = data.map((item) => item.day);
        this.optionLeft.series[0].data = data.map((item) => item.nowMoney);
        this.optionLeft.series[1].data = data.map((item) => item.lastMoney);
      }
      return this.optionLeft;
    },
    // // 销售趋势
    // getOptionLeft() {
    //   this.optionLeft.xAxis.data = ["一月", "二月", "三月", "四月"];
    //   this.optionLeft.series[0].data = [150, 230, 224, 218];
    //   this.optionLeft.series[1].data = [15, 23, 22, 21];
    // },
  },
};
</script>
<style lang="scss" scoped>
.catering-view {
  height: 100%;
  width: 100%;
  //margin-top: 20px;
  .top-view {
    width: 100%;
    height: calc(50% - 10px);
    margin-bottom: 10px;
    display: flex;
    .top-left {
      display: flex;
      height: 100%;
      width: calc(30% - 20px);
      margin-left: 10px;
    }
    .top-middle {
      width: calc(40%);
      height: 100%;
      margin-left: 10px;
      margin-right: 10px;
    }
    .top-right {
      height: 100%;
      width: calc(30% - 20px);
      margin-right: 10px;
    }
  }
  .bottom-view {
    width: 100%;
    height: calc(50% - 10px);
    margin-top: 10px;
    display: flex;
    .bottom-left {
      width: calc(50% - 15px);
      height: 100%;
      margin-right: 5px;
      margin-left: 10px;
    }
    .bottom-right {
      width: calc(50% - 15px);
      margin-right: 10px;
      height: 100%;
      margin-left: 5px;
    }
  }
}
</style>
<style lang="scss">
.catering-view
  .bottom-view
  .bottom-right
  .table-view
  .table
  .table-title
  .text-size {
  color: #0e5cc6;
  background: linear-gradient(180deg, #fff, #0e5cc6);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}
</style>